<template>
  <div class="oneSingerBox">
    <div class="mainbox">
      <div class="leftbox">
        <div class="leftTopBox">
          <el-image :src="attachImageUrl(oneSinger.pic)" class="image" fit="cover">
          </el-image>
        </div>
        <div class="leftBottomBox">
          <span><i class="el-icon-user-solid"></i>歌手：{{oneSinger.name}}</span><br>
          <span><i class="el-icon-s-goods"></i>性别：{{oneSinger.sex}}</span><br />
          <span><i class="el-icon-s-promotion"></i>地区：{{oneSinger.location}}</span><br />
          <span><i class="el-icon-s-flag"></i>出生：{{oneSinger.birth}}</span>
        </div>
      </div>
      <div class="rightbox">
        <div class="rightTopBox">
          <h1>个人简介</h1>
          <span>{{oneSinger.introduction| ellipsis}}<a @click="dialogVisible=true" class="moreBox">更多>></a></span>
          <el-dialog title="歌手资料卡" :visible.sync="dialogVisible" width="40%">
            <span class="intrBox">{{oneSinger.introduction}}</span>

          </el-dialog>
        </div>
        <div class="rightBottomBox">
          <div class="content">
            <h1 class="title">
              <slot name="title"></slot>
            </h1>
            <ul>
              <li>
                <div class="song-item">
                  <span class="item-index"></span>
                  <span class="item-title">歌曲名</span>
                  <span class="item-name">歌手</span>
                  <span class="item-intro">专辑</span>
                </div>
              </li>
              <li v-for="(item,index) in singerSong" :key="index">
                <div class="song-item" @click="toplay(item.id,item.url,item.pic,index,item.name,item.lyric)">
                  <span class="item-index">
                    {{index + 1}}
                  </span>
                  <span class="item-title">{{replaceFName(item.name)}}</span>
                  <span class="item-name">{{replaceLName(item.name)}}</span>
                  <span class="item-intro">{{item.introduction}}</span>
                </div>
              </li>
            </ul>

          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
  import {mixin} from '../mixins';
  import {mapGetters} from 'vuex';
  export default {
    mixins: [mixin],
    data() {
      return {
        thisSinger: "",
        dialogVisible: false,
        id: "",
        oneSinger: {
          id: "",
          name: "",
          sex: "",
          pic: "",
          birth: "",
          location: "",
          introduction: "",
        },
        singerSong: [],
        pageSize: 1, // 页数
        currentPage: 1, // 当前页
      }
    },
    computed:{
        ...mapGetters([
            'listOfSongs',      //当前播放列表
            'tempList',         //当前歌单对象
            'loginIn',          //用户是否已登录
            'userId',           //当前登录用户id
        ])
    },
    created() {
      this.id = this.$route.query.id;
      this.getOneSinger();
      this.getRequest("/singer/updateClick?id="+this.id).then((res) => {
      });
      this.getRequest("/song/singer/detail?singer_id=" + this.id).then((res) => {
        this.singerSong = res.data;
        this.$store.commit('setListOfSongs',res.data);
      });
    },
    filters: {
      // 当标题字数超出时，超出部分显示’...‘。此处限制超出8位即触发隐藏效果
      ellipsis(value) {
        if (!value) return ''
        if (value.length > 200) {
          return value.slice(0, 200) + '...'
        }
        return value
      }
    },
    methods: {
      //获取歌手信息
      getOneSinger(){
        const _this = this;
        _this.id = _this.$route.query.id;
        this.getRequest("/singer/selectByPrimaryKey?id=" + _this.id).then((res) => {
          _this.oneSinger = res.data;
          if (_this.oneSinger.sex == "1") {
              _this.oneSinger.sex = "男"
            }
            if (_this.oneSinger.sex == "0") {
              _this.oneSinger.sex = "女"
            }
            if (_this.oneSinger.sex == "2") {
              _this.oneSinger.sex = "组合"
            }
            if (_this.oneSinger.sex == "3") {
              _this.oneSinger.sex = "不明"
            }
        })
      },

      //点击表格某个歌曲，获取当前歌曲信息
      handleCurrentChange(val) {
        console.log(val.index);
        console.log(val.name);
        this.toplay(val.id, val.url, val.pic, val.index, val.name, val.lyric);

      },
    }
  }
</script>

<style scoped>
  .oneSingerBox {
    width: 100%;
  }

  .mainbox {
    width: 92%;
  }

  .leftbox {
    float: left;
    width: 25%;
    margin-top: 50px;
  }

  .rightbox {
    margin-top: 50px;
    float: left;
    width: 73%;
  }

  .leftTopBox {
    text-align: center;
    margin-top: 50px;
    width: 100%;
    height: 300px;

  }

  .image {
    width: 90%;
    height: 300px;
    border: 5px papayawhip solid;
    border-radius: 50px;
    background-clip: padding-box;
  }

  .leftBottomBox {
    float: right;
    width: 70%;
    height: 300px;
    line-height: 50px;
  }

  .rightTopBox {
    margin-top: 50px;
    width: 100%;
    height: 140px;
  }

  .rightBottomBox {
    width: 100%;
    height: 63vh;
    padding: 0 0 0 40px;
  }

  .tableBox {
    width: 900px;
    height: 520px;
    background-color: white;
    border-radius: 10px;
    background-clip: padding-box;
  }

  .moreBox {
    color: blue;
    cursor: pointer;
  }

  .intrBox {
    line-height: 25px;
    font-family: 黑体;
    font-size: 15px;
  }

  .pagination {
    display: flex;
    justify-content: center;
  }

  .content {
    background-color: white;
    border-radius: 15px;
    padding: 20px 40px;
    min-width: 600px;
  }

  .title {
    text-align: center;
  }

  ul {
    width: 100%;
    padding-bottom: 50px;
  }

  li {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    display: block;
    height: 50px;
    line-height: 50px;
    text-indent: 20px;
    cursor: pointer;
  }

  .song-item {
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    flex-direction: row;
    flex-wrap: nowrap;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;




  }

  .item-index {
    width: 5%;
  }

  .item-title {
    width: 30%;
  }

  .item-name {
    width: 25%;
  }

  .item-intro {
    width: 40%;
  }
</style>
